/*------------------------------------*\
    $TAGS
\*------------------------------------*/
/**
 * Basic tags structural styling based on XOXCO plugin
 * http://xoxco.com/projects/code/tagsinput/ 
 * 
 * Designed and built @kurenn  
 */

.tagsinput {
  background: white;
  border: 1px solid #CCC;
  padding: 4px 1px 0px 4px;
  overflow-y: auto;
  text-align: left;
  .tag {
    @include border-radius(2px);
    background: $dark-blue;
    color: lighten($inverse, 90%);
    cursor: pointer;
    margin-right: 5px;
    margin-bottom: 5px;
    overflow: hidden;
    padding: 6px 13px 6px 19px;
    position: relative;
    vertical-align: middle;
    @include inline-block;
    @include transition(0.14s linear);
    &:hover {
      background-color: scale-color($dark-blue, $lightness: -15%);
      padding-left: 12px;
      padding-right: 20px;
      .tagsinput-remove-link {
        color: $inverse;
        @include opacity(1);
        // Opacity fallback for IE
        display: block\9;
      }
    }
  }
  input {
    background: transparent;
    border: none;
    color: $inverse;
    font-size: $base-font-size;
    margin: 0px;
    padding: 0 0 0 5px;
    outline: 0;
    margin-right: 5px;
    margin-bottom: 5px;
    width: auto;
  }
}

.tagsinput-remove-link {
  bottom: 0;
  color: $inverse;
  cursor: pointer;
  font-size: 12px;
  opacity: 0;
  padding: 9px 7px 3px 0;
  position: absolute;
  right: 0;
  text-align: right;
  text-decoration: none;
  top: 0;
  width: 100%;
  z-index: 2;
  // Opacity fallback for IE
  display: none\9;
  &:before {
    color: $inverse;
  }
}

.tagsinput-add-container {
  vertical-align: middle;
  @include inline-block;
}

.tagsinput-add {
  background-color: scale-color(desaturate($inverse, 15%), $lightness: 67%);
  @include border-radius(2px);
  color: $inverse;
  cursor: pointer;
  margin-bottom: 5px;
  padding: 6px 9px;
  @include inline-block;
  @include transition(0.25s);

  &:hover {
    background-color: $dark-blue;
    color: #FFF;
  }
}

.tags_clear {
  clear: both;
  width: 100%;
  height: 0px;
}

.not_valid {
  background: #fbd8db !important;
  color: #90111a !important;
}
